<template>
  <div class="form-wrap">
    <scrollList ref="btylist" :loadMore="false" :bounce="false">
      <div slot="defaultScroll">
        <div :class="`${loading ? 'fromscroll waiting': 'fromscroll'}`">
          <div class="car-box-wrap">
            <div class="cb-logo">
              <img :src="logo">
            </div>
            <div class="cb-km" >
              <input type="tel" maxlength="6" placeholder="0" v-model="totalKm"/>
            </div>
            <div class="cb-startTime" @click.prevent.stop="openDp">
              <span>{{selectRq[0]}}</span>
              <span>{{selectRq[1]}}</span>
            </div>
            <div class="cb-vin">
              <input type="text" maxlength="17" v-model="param.vin" />
            </div>
            <div class="cb-plate" @click.prevent.stop="openPlateDp">{{this.plateNo}}</div>
            <div class="cb-times" @click.prevent.stop="openTimesDp">{{this.timeNum > 0 ? `本周充电${this.timeNum}次`: '本周充电次数'}}</div>
          </div>
          <div class="battery-box-wrap">
            <div class="cb-bmf">
              <input type="text" maxlength="30" v-model="param.batteryManufacturer" />
            </div>
            <div class="cb-bst" @click.prevent.stop="openBtyDp">
              <span>{{selectDate[0]}}</span>
              <span>{{selectDate[1]}}</span>
              <span>{{selectDate[2]}}</span>
            </div>
          </div>
          <div class="battery-start">
            <div class="lightline"></div>
            <div class="start-btn">
              <button type="button" class="start-icon" @click.prevent.stop="goTest"></button>
              <div class="start-progress"></div>
            </div>
          </div>
        </div>
      </div>
    </scrollList>
    <Datepicker ref="datepicker" v-show="dpvisible" :startYear="startYear" :col="col" @dpVisible="closeDp"
                @pickYear="getRqYear" @pickMonth="getRqMonth"></Datepicker>
    <Datepicker ref="batteryDp" v-show="btydpvisible" :startYear="btydpStartY" :col="btyCol" @dpVisible="closeBtyDp"
                @pickYear="getYear" @pickMonth="getMonth" @pickDay="getDay"></Datepicker>
    <Picker ref="platePicker" v-if="plateVisible" :firstVals="plateNos" @pickVisible="closePlateDp" @pickNth="getPlateNo"></Picker>
    <Picker ref="timesPicker" v-show="timesVisible" :firstVals="times" @pickVisible="closeTimesDp" @pickNth="getTimesNo"></Picker>
    <div class="loading" v-if="loading">
      <div class="bty-wrap loading-box">
        <i class="corner left-corner"></i>
        <i class="corner right-corner"></i>
        <section>
          <h3>报告生成中</h3>
          <p>您的报告正在生成中，请耐心等待。</p>
        </section>
      </div>
    </div>
    <toast :open="toastVisible" :delay="delay" :commitFlag="false" @close="closeToast">
      <div slot="tipmes">{{toastMes}}</div>
    </toast>
  </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '@/components/scroll/list';
  import Datepicker from '@/components/datepicker/datepicker';
  import Picker from '@/components/picker/picker';
  import logo from '@/assets/img/i8car.png';
  import {getBatteryInfo, requestBatteryInfo} from '@/mock/mock';
  import functionalTool from '@/utils/functionTools';
  import JsBridge from '@/utils/jsbridge';
  import toast from '@/components/feedback/toast';

  export default {
    name: 'bty-form',
    data () {
      return {
        delay: !1,
        toastMes: '',
        toastVisible: !1,
        showall: !1,
        subFlag: !0,
        logo,
        startYear: 2010,
        col: 2,
        btydpStartY: 2000,
        btyCol: 3,
        dpvisible: !1,
        btydpvisible: !1,
        plateVisible: !1,
        timesVisible: !1,
        selectRq: ['0000', '00'],
        selectDate: ['0000', '00', '00'],
        plateNos: [],
        plateNo: '请选择车辆',
        carIds: {},
        times: [],
        timeNum: 0,
        totalKm: '',
        loading: !1,
        param: {
          userId: functionalTool.getUrlParam('accountId'),
          totalKm: '',
          carId: '',
          batteryStartTime: '',
          batteryManufacturer: '',
          vin: ''
        },
        jsbridge: new JsBridge()
      };
    },
    created () {
      let i = 1;
      while (i < 21) {
        this.times.push(i);
        i++;
      }
    },
    mounted () {
      if (!this.param.userId || this.param.userId === 'null') {
        this.showMessage('请先登录', !1);
      }
      window.sessionStorage.setItem('userId', functionalTool.getUrlParam('accountId'));
      this.getInitialData().then(() => {
        this.$nextTick(() => {
          this.$refs.btylist && this.$refs.btylist._initComponent();
        });
      });
    },
    watch: {
      totalKm: {
        handler: function () {
          this.totalKm = this.totalKm.replace(/\D/g, '');
          this.param.totalKm = this.totalKm;
        },
        deep: true
      }
    },
    methods: {
      openPlateDp () {
        if (!this.plateNos.length) {
          this.showMessage('暂无车辆可选择', !0);
          return;
        }
        this.plateVisible = !0;
        this.$nextTick(() => {
          this.$refs.platePicker && this.$refs.platePicker.initScroll();
        });
      },
      openTimesDp () {
        this.timesVisible = !0;
        this.$refs.timesPicker && this.$refs.timesPicker.initScroll();
      },
      openDp () {
        this.dpvisible = !0;
        this.$refs.datepicker.initScroll();
      },
      closeDp (v) {
        this.dpvisible = v.close;
      },
      openBtyDp () {
        this.btydpvisible = !0;
        this.$refs.batteryDp.initScroll();
      },
      closeBtyDp (v) {
        this.btydpvisible = v.close;
        if (v.confirmed) {
          this.param.batteryStartTime = this.selectDate.join('-');
        }
      },
      getRqYear (y) {
        this.selectRq[0] = y;
      },
      getRqMonth (m) {
        this.selectRq[1] = (Array(2).join('0') + m).slice(-2);
      },
      getYear (y) {
        this.selectDate[0] = y;
      },
      getMonth (m) {
        this.selectDate[1] = (Array(2).join('0') + m).slice(-2);
      },
      getDay (m) {
        this.selectDate[2] = (Array(2).join('0') + m).slice(-2);
      },
      getPlateNo (p) {
        this.plateNo = p;
      },
      closePlateDp (v) {
        this.plateVisible = v.close;
        if (v.confirmed) {
          this.param.carId = this.carIds[this.plateNo].id;
          this.logo = this.carIds[this.plateNo].logo;
        }
      },
      getTimesNo (p) {
        this.timeNum = p;
      },
      closeTimesDp (v) {
        this.timesVisible = v.close;
      },
      async getInitialData () {
        try {
          let resData = (await getBatteryInfo({
            userId: functionalTool.getUrlParam('accountId')
          })).data;
          if (resData.code === '200' || resData.code === '304') {
            if (resData.data.carList.length) {
              for (let cl of resData.data.carList) {
                this.carIds[cl.plateNo] = {id: cl.id, logo: cl.icon};
                this.plateNos.push(cl.plateNo);
              }
            }
            if (resData.data && resData.data.batteryInfo) {
              if (resData.data.batteryInfo.status === '1') {
                this.loading = !1;
                window.sessionStorage.setItem('btyInfo', JSON.stringify(resData.data.batteryInfo));
                this.$route.query.retest || this.$router.replace({
                  path: 'btystart'
                });
              } else if (resData.data.batteryInfo.status === '0') {
                this.loading = !0;
              } else {
                this.loading = !1;
              }
            } else {
              this.loading = !1;
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async goTest () {
        if (!this.subFlag) {
          return;
        }
        this.subFlag = !1;
        try {
          let res = (await requestBatteryInfo(this.param)).data;
          this.subFlag = !0;
          if (res.code === '200') {
            this.loading = !0;
          } else {
            this.showMessage(res.text, !0);
          }
        } catch (e) {
          alert(e);
        }
      },
      showMessage (m, f) {
        this.delay = f;
        this.toastVisible = !0;
        this.toastMes = m;
      },
      closeToast () {
        this.toastVisible = !1;
        this.toastMes = '';
      }
    },
    components: {
      Datepicker,
      Picker,
      scrollList,
      toast
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '~@/assets/css/mixin.styl';
.form-wrap
  position relative
  width 100%
  height 100%
  background-color #040e29
  .scrollwrap
    background-color #040e29
    .fromscroll
      padding-top rpx(20)
      .car-box-wrap
        width rpx(720)
        height rpx(664)
        background url("https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/carinfo_bg.png") no-repeat
        background-size 100% 100%
        margin 0 auto
        position relative
        .cb-logo
          position absolute
          width rpx(296)
          height rpx(130)
          font-size 0
          top rpx(110)
          left rpx(46)
          & img
            width 100%
            height 100%
        .cb-km
          position absolute
          width rpx(320)
          height rpx(66)
          right rpx(24)
          top rpx(179)
          & input
            font-family "Quartz"
            display block
            width 100%
            height 100%
            background-color transparent
            color #fff
            font-size rpx(50)
            text-align right
            letter-spacing rpx(25)
        .cb-startTime
          font-family "Quartz"
          position absolute
          width rpx(318)
          height rpx(64)
          right rpx(17)
          top rpx(342)
          color #fff
          font-size rpx(50)
          line-height rpx(64)
          letter-spacing rpx(26)
          display flex
          & span:first-child
            margin-right rpx(18)
        .cb-vin
          position absolute
          width rpx(588)
          height rpx(64)
          left 50%
          margin-left rpx(-294)
          bottom rpx(80)
          & input
            display block
            font-size rpx(28)
            width 100%
            height 100%
            background-color transparent
            text-align center
            color #fff
        .cb-plate
          position absolute
          width rpx(300)
          height rpx(50)
          color #fff
          font-size rpx(24)
          left rpx(76)
          top rpx(288)
        .cb-times
          position absolute
          width rpx(300)
          height rpx(50)
          color #fff
          font-size rpx(24)
          left rpx(76)
          top rpx(352)
      .battery-box-wrap
        width rpx(720)
        height rpx(540)
        background url("https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/battery_bg.png") no-repeat
        background-size 100% 100%
        margin rpx(44) auto
        position relative
        .cb-bmf
          position absolute
          width rpx(588)
          height rpx(64)
          left 50%
          margin-left rpx(-298)
          top rpx(190)
          & input
            display block
            font-size rpx(24)
            width 100%
            height 100%
            background-color transparent
            text-align center
            color #fff
        .cb-bst
          position absolute
          width rpx(438)
          height rpx(64)
          left 50%
          margin-left rpx(-208)
          bottom rpx(100)
          color #fff
          font-size rpx(50)
          line-height rpx(64)
          letter-spacing rpx(26)
          display flex
          font-family "Quartz"
          & span
            margin-left rpx(18)
          & span:first-child
            margin-left 0
      .battery-start
        padding rpx(20) 0 rpx(80) 0
        .lightline
          width rpx(748)
          height rpx(4)
          background url("../../assets/img/lightline.png") no-repeat
          background-size 100% 100%
          animation move 2s linear 10000
        .start-icon
          width rpx(158)
          height rpx(158)
          background url("../../assets/img/bty_start.png") no-repeat
          background-size 100% 100%
          position absolute
          left 50%
          top 50%
          margin-left rpx(-87)
          margin-top rpx(-79)
          z-index 2
          animation boom 2s linear 10000
        .start-btn
          width rpx(586)
          height rpx(216)
          margin 0 auto
          background url("https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/battery_start.png") no-repeat
          background-size 100% 100%
          position relative
          .start-progress
            position absolute
            z-index 1
            width rpx(104)
            height rpx(196)
            background url("../../assets/img/battery_prog.png") no-repeat
            background-size 100% 100%
            left 50%
            top 50%
            margin-top rpx(-98)
            animation progress 2s linear 10000
            transform-origin 0 rpx(98)
    .waiting
      filter blur(4px)
  .loading
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    background-color rgba(0, 0, 0, 0.6)
    display flex
    align-items center
    justify-content center
    z-index 9999
    .bty-wrap
      position relative
      width rpx(646)
      height rpx(530)
      border 2px solid #148ab6
      background url("https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/img_bg_ta%402x.png") repeat
      box-shadow 0 0 8px rgba(255, 255, 255, 0.5) inset
      animation hx 1.5s 10000
      display flex
      align-items center
      justify-content center
      & section
        font-size rpx(50)
        text-align center
        color #fff
        & p
          font-size rpx(28)
          line-height rpx(126)
      .corner
        display block
        position absolute
        width rpx(40)
        height rpx(40)
        border 4px solid #02a0ec
        z-index 99
        &.left-corner
          top -4px
          left -4px
          border-right none
          border-bottom none
        &.right-corner
          bottom -4px
          right -4px
          border-left none
          border-top none

  ::-webkit-input-placeholder
    font-family "Quartz"
    font-size rpx(50)
    letter-spacing rpx(24)
    color #fff

  @keyframes move {
    0% {
      transform translate3d(0, 5vw, 0)
      opacity 0.8
    }
    25% {
      opacity 1
    }
    50% {
      transform translate3d(0, 25vw, 0)
      opacity 0.8
    }
    75% {
      opacity 1
    }
    100% {
      transform translate3d(0, 5vw, 0)
      opacity 0.8
    }
  }

  @keyframes progress {
    0% {
      transform rotateZ(0)
    }
    50% {
      transform rotateZ(-180deg)
    }
    100% {
      transform rotateZ(-360deg)
    }
  }

  @keyframes boom {
    0%, 20%, 40%, 60%, 80%, to {
      animation-timing-function:cubic-bezier(.215, .61, .355, 1)
    }
    0% {
      transform:scale3d(1, 1, 1)
    }
    10% {
      transform:scale3d(1.05, 1.05, 1.05)
    }
    20% {
      transform:scale3d(.95, .95, .95)
    }
    30% {
      transform:scale3d(1.05, 1.05, 1.05)
    }
    40% {
      transform:scale3d(.95, .95, .95)
    }
    60% {
      transform:scale3d(1, 1, 1)
    }
    to {
      transform:scale3d(1, 1, 1)
    }
  }

  @keyframes hx {
    0% {
      box-shadow 0 0 14px rgba(255, 255, 255, 0) inset
    }
    50% {
      box-shadow 0 0 14px rgba(255, 255, 255, 0.6) inset
    }
    100% {
      box-shadow 0 0 14px rgba(255, 255, 255, 0) inset
    }
  }
</style>
